<script setup>
import { Toast } from 'vant';
import AddAddress from "@/views/center/address/component/AddAddress.vue";
import {addressList, defaultAddress, deleteAddress} from "@/api/address.js";
import { showToast } from 'vant';
import noDataImg from '@/assets/image/empty_address.png';
import { useI18n} from 'vue-i18n';
const { t } = useI18n();
// 获取地址列表
const addressListData = ref([])
function getAddressList() {
  addressList().then(res => {
    const {rows} = res
    addressListData.value = rows;
  })
}

// 设置默认地址
function setDefaultAddress(nonDefault, id) {
  if (nonDefault) {
    defaultAddress(id).then(res => {
      showToast(t('addressManagement.editSuccessful'))
      getAddressList()
    }).catch(() => showToast(t('addressManagement.editFailed')))
  }
}

// 删除当前地址
const delLoading = ref(false)
const delShow = ref(false)
const currentAddressId = ref(null)
function showDelPopup(id) {
  currentAddressId.value = id
  delShow.value = true
}
function deleteCurrentAddress() {
  delLoading.value = true
  deleteAddress(currentAddressId.value).then(() => {
    showToast(t('addressManagement.successfullyDeleted'))
    delShow.value = false
    delLoading.value = false
    rest()
  }).catch(() => showToast(t('addressManagement.deletionFailure')))
}

// 新增地址
const addressRef = ref()
function clickNewAddress(item) {
  addressRef.value.show(item)
}

// 重新请求
function rest() {
  getAddressList()
}
onMounted(() => {
  getAddressList()
})
</script>
<template>
  <div class="address">
    <h3>{{t('addressManagement.title')}}</h3>
    <div class="address-box">
      <div v-if="addressListData.length > 0">
        <div class="address-item" v-for="(item, index) in addressListData" :key="item.addressId">
          <div class="address-info">
            <div class="user-name">{{item.firstName}} {{item.lastName}}</div>
            <div class="contact-address">
              <div class="detailed-address">{{item.province}}{{item.city}}{{item.detail}}</div>
              <div class="contact">
                <div class="contact-phone">{{item.phone}}，</div>
                <div class="contact-postcode">{{t('addressManagement.postcode')}}({{item.postCode}})</div>
              </div>
            </div>
            <div class="country-region">{{item.country}}</div>
          </div>
          <div class="controls">
            <span class="controls-default" @click="setDefaultAddress(item.isDefault !== 1, item.addressId)" :class="{default: item.isDefault === 1}">{{item.isDefault === 1 ? t('addressManagement.defaultAddress') : t('addressManagement.setDefaultAddress')}}</span>
            <span class="controlse-dit" @click="clickNewAddress(item)">{{t('addressManagement.modifyAddress')}}</span>
            <span class="controls-del" @click="showDelPopup(item.addressId)">{{t('addressManagement.delete')}}</span>
          </div>
        </div>
        <div class="add-address" @click="clickNewAddress(false)">
          <van-icon name="plus" size="14" />
          <span>{{t('addressManagement.addAddress')}}</span>
        </div>
      </div>
      <div v-else class="empty">
        <van-empty
            :image="noDataImg"
            :description="t('addressManagement.noAddress')"
            image-size="80">
          <div class="ant-btn" @click="clickNewAddress(false)">
            <van-button icon="plus" class="line-btn">{{t('addressManagement.addAddress')}}</van-button>
          </div>
        </van-empty>
      </div>
    </div>
  </div>
  <van-popup v-model:show="delShow" :style="{ padding: '24px', width: '85%' }">
    <div class="popup-box">
      <h3>{{t('addressManagement.whetherDeleteAddress')}}</h3>
      <div class="btn-box">
        <van-button class="add-btn s-btn" @click="delShow = false">{{t('addressManagement.cancel')}}</van-button>
        <van-button :loading="delLoading" class="s-btn" @click="deleteCurrentAddress">{{t('addressManagement.affirm')}}</van-button>
      </div>
    </div>
  </van-popup>
  <add-address @rest="rest" ref="addressRef"></add-address>
</template>

<style lang="scss" scoped>
.address {
  padding: 0 16px;
  .ant-btn {
    width: 158px;
    margin: 0 auto;
    border-color: #262626;
    height: 44px;
  }
  h3 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 15px;
  }
  .address-item {
    padding: 16px;
    border: 1px solid #8C8C8C;
    margin-bottom: 12px;
    .address-info {
      .user-name {
        font-size: 12px;
        color: #262626;
        font-weight: 600;
        margin-bottom: 10px;
      }
      .contact-address {
        color: #262626;
        font-size: 12px;
        font-weight: 400;
        .contact {
          display: flex;
          align-items: center;
        }
        .detailed-address {
          margin-bottom: 5px;
        }
      }
      .country-region {
        font-weight: 400;
        font-size: 12px;
        color: #262626;
        margin-top: 15px;
      }
    }
    .controls {
      span {
        font-size: 12px;
        color: #262626;
        font-weight: 400;
        padding-right: 10px;
        margin-right: 10px;
        border-right: 1px solid #8C8C8C;
        cursor: pointer;
        text-decoration: underline;
      }
      .default {
        color: #8C8C8C;
      }
      :last-child {
        border: none;
      }
    }
  }
  .add-address {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 32px;
    border-radius: 2px;
    border: #262626 solid 1px;
    color: #262626;
    cursor: pointer;
    font-size: 12px;
    span {
      margin-left: 5px;
    }
  }
}
.popup-box {
  width: 100%;
  h3 {
    font-weight: 500;
    font-size: 16px;
    color: #262626;
    text-align: center;
  }
  .btn-box {
    margin-top: 20px;
    display: flex;
    button {
      margin:5px;
      height: 44px;
    }
  }
}
</style>
